<!DOCTYPE html>
<html lang="ch">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
    <link rel="stylesheet" href="/index.css" />
  </head>
  <body>
    <div id="div">
      <div class="container" id="container">
        <div class="form-container sign-up-container">
          <form action="#">
            <h1>注册账号</h1>
            <div class="social-container">
              <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
              <a href="#" class="social"
                ><i class="fab fa-google-plus-g"></i
              ></a>
              <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
            </div>
            <input type="text" placeholder="账号" />
            <input type="email" placeholder="邮箱" />
            <input type="password" placeholder="密码" />
            <button>注册</button>
          </form>
        </div>
        <div class="form-container sign-in-container">
          <form action="#">
            <h1>登录</h1>
            <div class="social-container">
              <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
              <a href="#" class="social"
                ><i class="fab fa-google-plus-g"></i
              ></a>
              <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
            </div>
            <input type="email" placeholder="邮箱" />
            <input type="password" placeholder="密码" />
            <a href="#">忘记密码</a>
            <button>登录</button>
          </form>
        </div>
        <div class="overlay-container">
          <div class="overlay">
            <div class="overlay-panel overlay-left">
              <h1>欢迎回来</h1>
              <p>每日一句。</p>
              <button class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-panel overlay-right">
              <h1>Hello, Friend!</h1>
              <p>每日一句。</p>
              <button class="ghost" id="signUp">注册</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      const signUpButton = document.getElementById("signUp");
      const signInButton = document.getElementById("signIn");
      const container = document.getElementById("container");

      signUpButton.addEventListener("click", () => {
        container.classList.add("right-panel-active");
      });

      signInButton.addEventListener("click", () => {
        container.classList.remove("right-panel-active");
      });
    </script>
    
  </body>
</html>
